<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <div id="box">111</div>
    <div id="box">222</div>
    <div id="box">333</div>
    <div class="cont">444</div>
    <div class="cont">555</div>
    <div class="cont">666</div>
    <span>777</span>
    <span>777</span>
    <span>777</span>
    <span>777</span>
    <p>888</p>
    <p>888</p>
    <p>888</p>
    <p>888</p>
    <input type="text" name="user">
    <input type="text" name="user">
    <input type="text" name="user">
    <div id="box1">999</div>
    <p id="box1">123</p>
    <div class="box2">1010</div>
    <p class="box2">0101</p>
</body>
<script>
    // 1、ID选择器
    // id:document.getElementById("id名")
    // id 选择器只能选中一个（第一个）、直接选择（没有通过其子代来选择）
    // document.getElementById("box").style.background="red"
    var oBox=document.getElementById("box");
    oBox.style.background="red";
    console.log(oBox);
    console.log(typeof oBox);               //object


    // 2、class选择器
    // class:document.getElementsByClassName("class名")
    // 以数组的形式包裹选中的元素，需操作元素必须先解析出来，再操作
    var aCont=document.getElementsByClassName("cont")
    // 选中的元素以数组的形式显示
    console.log(aCont);             
    console.log(typeof aCont);              //object
    // 遍历数组
        for(i=0;i<aCont.length;i++){
            console.log(aCont[i])
        }
    aCont[0].style.background="yellow";
    aCont[1].style.background="pink";
    aCont[2].style.background="blue";

    // 3、tag:选择器、
    // tag:document.getElementsByTagName("tag名");
        var tSpan=document.getElementsByTagName("span");
        console.log(tSpan);
        console.log(typeof tSpan);
        for(j=0;j<tSpan.length;j++){
            console.log(tSpan[j]);
        }
        tSpan[0].style.background="gray";
        tSpan[1].style.background="yellow";
        tSpan[2].style.background="red";
        tSpan[3].style.background="blue";

        var tP=document.getElementsByTagName("p")
        console.log(tP);
        console.log(typeof tP);
        for(k=0;k<tP.length;k++){
            console.log(tP[k]);
        }
        tP[0].style.background="gray"
        tP[1].style.background="yellow"
        tP[2].style.background="red"
        tP[3].style.background="blue"

        // 4、name:选择器
        // name:document.getelementsbyname("user")
        // 选择多个
        var oName=document.getElementsByName("user");
        console.log(oName);
        console.log(typeof oName);
        for(n=0;n<oName.length;n++){
            console.log(oName[n])
        }
        oName[0].style.background="yellow";
        // oName[0].style.width="300px";
        oName[1].style.background="red";
        oName[2].style.background="blue";

// ES5新增的
        // 5、queryselector：支持css选择器写法
        // document.querySelector("css选择器写法")
        // querySelector只能选择一个
        var oEle=document.querySelector("#box1");
        console.log(oEle);
        console.log(typeof oEle);
        oEle.style.background="green"

        // 6、queryselectorAll
        // document.querySelectorAll("css选择器写法")
        var oEle=document.querySelectorAll("#box1");
        console.log(oEle);
        console.log(typeof oEle);
        for(q=0;q<oEle.length;q++){
            console.log(oEle[q]);
        }
        oEle[1].style.background="brown";
        var oClass=document.querySelectorAll(".box2")
        // var oClass=document.querySelectorAll(".box2");
        console.log(oClass);
        console.log(typeof oClass);
        for(c=0;c<oClass.length;c++){
            console.log(oClass[c]);
        }
        oClass[0].style.background="blue";
        oClass[1].style.color="red";


</script>
</html>